import * as React from 'react';

import authService from '../../../services/svc.auth';
import { Input } from '../../../components/input';
import { Button } from '../../../components/button';
import { Row } from '../../../components/layout';
import { Card, CardBody, CardTitle } from '../../../components/card';

export class RealLoginPage extends React.Component {
  state = {
    username: '',
    password: '',
  };

  handleLogin = async () => {
    const { username, password } = this.state;
    try {
      await authService.login(username, password);
    } catch (err) {
      console.log(err);
    }
  };

  render() {
    const { username, password } = this.state;

    return (
      <Card style={{ maxWidth: 300, margin: '10rem auto' }}>
        <CardTitle>登录</CardTitle>
        <CardBody>
          <Row>
            <Input
              placeholder="用户名"
              value={username}
              onChange={(e) => this.setState({ username: e.target.value })}
            />
          </Row>
          <Row>
            <Input
              placeholder="密码"
              type="password"
              value={password}
              onChange={(e) => this.setState({ password: e.target.value })}
            />
          </Row>
          <Row>
            <Button onClick={this.handleLogin}>登录</Button>
          </Row>
        </CardBody>
      </Card>
    );
  }
}
